<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录 - 指针平台</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="{% static 'css/style.css' %}">
</head>
<body>
    <div class="login-container">
        <div class="row g-0">
            <!-- 左侧部分 -->
            <div class="left-section col-md-5 d-none d-md-block">
                <h2>指针平台助力学校构建<br>新一代智慧校园</h2>
                <p>引擎·全终端·数据驱动</p>
                <div class="illustration">
                    <!-- 这里可以放置SVG图像 -->
                    <svg width="300" height="250" viewBox="0 0 100 80" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <rect x="10" y="10" width="80" height="60" rx="5" fill="rgba(255,255,255,0.1)"/>
                        <circle cx="30" cy="30" r="5" fill="white" opacity="0.8"/>
                        <circle cx="70" cy="30" r="5" fill="white" opacity="0.8"/>
                        <path d="M20 50 Q50 65 80 50" stroke="white" stroke-width="2" fill="none"/>
                        <rect x="20" y="60" width="10" height="5" rx="1" fill="white" opacity="0.8"/>
                        <rect x="45" y="60" width="10" height="5" rx="1" fill="white" opacity="0.8"/>
                        <rect x="70" y="60" width="10" height="5" rx="1" fill="white" opacity="0.8"/>
                    </svg>
                </div>
            </div>
            
            <!-- 右侧部分 -->
            <div class="right-section col-md-7">
                <h3>指针平台</h3>
                
                <!-- 登录标题 -->
                <h3 class="text-center mb-4">指针平台</h3>
                
                <!-- 消息提示 -->
                {% if messages %}
                <div class="messages">
                    {% for message in messages %}
                    <div class="alert alert-{% if message.tags %}{{ message.tags }}{% else %}info{% endif %}">
                        {{ message }}
                    </div>
                    {% endfor %}
                </div>
                {% endif %}
                
                <!-- 登录表单 -->
                <form method="post" action="{% url 'login' %}">
                    {% csrf_token %}
                    <div class="form-group">
                        <label for="username">用户名</label>
                        <div class="input-group">
                            <span class="input-group-text">
                                <i class="fas fa-user"></i>
                            </span>
                            <input type="text" class="form-control" id="username" name="username" placeholder="请输入用户名" required>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label for="password">密码</label>
                        <div class="input-group">
                            <span class="input-group-text">
                                <i class="fas fa-lock"></i>
                            </span>
                            <input type="password" class="form-control" id="password" name="password" placeholder="请输入密码" required>
                            <span class="input-group-text toggle-password">
                                <i class="fas fa-eye"></i>
                            </span>
                        </div>
                    </div>
                    
                    <button type="submit" class="btn btn-primary w-100">登录</button>
                    
                    <div class="form-footer">
                        还没有账号？ <a href="{% url 'register' %}">立即注册</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/js/bootstrap.bundle.min.js"></script>
    <script>
        // 密码显示/隐藏切换
        document.querySelector('.toggle-password').addEventListener('click', function() {
            const passwordInput = document.getElementById('password');
            const icon = this.querySelector('i');
            
            if (passwordInput.type === 'password') {
                passwordInput.type = 'text';
                icon.classList.remove('fa-eye');
                icon.classList.add('fa-eye-slash');
            } else {
                passwordInput.type = 'password';
                icon.classList.remove('fa-eye-slash');
                icon.classList.add('fa-eye');
            }
        });
    </script>
</body>
</html>